<template>
  <div class='right-two-pies'>
      <div class="two-pies-header">认证情况</div>
      <div id="two-charts">
        <div id="two-charts-left"><RightTwoLeftPie /></div>
        <div id="two-charts-right"><RightTwoRightPie /></div>
      </div>
  </div>
</template>

<script>
import RightTwoLeftPie from './RightTwoLeftPie'
import RightTwoRightPie from './RightTwoRightPie'

var areaData = ['宝应县', '高邮市', '广陵区', '江都区', '仪征市', '邗江区']
var data = [112, 114, 117, 113, 115, 110]
export default {
  name: 'RightTwoPies',
  components: {
    RightTwoLeftPie,
    RightTwoRightPie
  },
  data () {
    return {
      option: {
        // backgroundColor: '#061326',
        title: {
          show: true,
          text: '<i>blue</i>  户籍所在地',
          right: 20,
          top: 60,
          textStyle: {
            color: '#1bb3d5',
            fontSize: 16,
            align: 'center',
            fontFamily: '"Microsoft Yahei","微软雅黑"'
          }
        },
        animation: false,
        xAxis: [{
          type: 'category',
          data: areaData,
          axisTick: {
            alignWithLabel: true
          },
          nameTextStyle: {
            color: '#82b0ec'
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#82b0ec'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize: 16
            },
            margin: 30
          }
        }],
        yAxis: [{
          show: true,
          type: 'value',
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize: 16
            }
          },
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: '#0c2c5a'
            }
          },
          axisLine: {
            show: true
          },
          max: 250
        }],
        series: [{
          name: '',
          type: 'pictorialBar',
          symbolSize: [40, 10],
          symbolOffset: [0, -6],
          symbolPosition: 'end',
          z: 12,
          // 'barWidth': '0',
          label: {
            normal: {
              show: true,
              position: 'top',
              fontSize: 18,
              fontWeight: 'normal',
              color: '#1bb3d5'
            }
          },
          color: '#2DB1EF',
          data: data
        },
        {
          name: '',
          type: 'pictorialBar',
          symbolSize: [40, 10],
          symbolOffset: [0, 7],
          // 'barWidth': '20',
          z: 12,
          color: '#2DB1EF',
          data: data
        },
        {
          name: '',
          type: 'pictorialBar',
          symbolSize: [50, 15],
          symbolOffset: [0, 12],
          z: 10,
          itemStyle: {
            normal: {
              color: 'transparent',
              borderColor: '#2EA9E5',
              borderType: 'solid',
              borderWidth: 1
            }
          },
          data: data
        },
        {
          name: '',
          type: 'pictorialBar',
          symbolSize: [70, 20],
          symbolOffset: [0, 18],
          z: 10,
          itemStyle: {
            normal: {
              color: 'transparent',
              borderColor: '#19465D',
              borderType: 'solid',
              borderWidth: 2
            }
          },
          data: data
        },
        {
          type: 'bar',
          // silent: true,
          barWidth: 40,
          barGap: '10%', // Make series be overlap
          barCateGoryGap: '10%',
          itemStyle: {
            normal: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
                offset: 0,
                color: '#1bb3d5'
              },
              {
                offset: 1,
                color: '#1c6f83'
              }
              ]),
              opacity: 1
            }
          },
          data: data
        }
        ]
      }
    }
  },
  mounted () {
  }
}
</script>

<style lang="less" scoped>
.right-two-pies {
  width: 100%;
  height: 100%;
  display: flex;
  flex-grow: 0;
  flex-direction: column;

  .two-pies-header {
    font-size: 18px;
    font-weight: 550;
    width: 100%;
    text-align: center;
    margin: 10px 0 10px 0;
  }

  #two-charts {
    width: 100%;
    height: calc(~"100% - 50px");
    display: flex;
    flex-direction: row;

    #two-charts-left {
      width: 50%;
      height: 100%;
    }

    #two-charts-right {
      width: 50%;
      height: 100%;
    }
  }
}
</style>
